/*
<div class="thumbnail-container">
  <a class="thumbnail" href="#thumb">
    <img src="img_1082.jpg" alt="who.gif"/>
    <span><img src="img_1082.jpg"/><br />Nice picture.</span>
  </a>
  <a class="thumbnail" href="#thumb">
    <img src="img_1935.jpg" alt="who.gif"/>
    <span><img src="img_1935.jpg"/><br />Genuine testimonials add credential to your site.</span>
  </a>
</div>
*/

.thumbnail-container{
  position: relative;
  /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
  border: 1px solid white;
  margin-left: -4px;
  margin-top: -2px;
  padding: 0px;
  width: 80px;  /* thumbnail image size */
}

.thumbnail:hover{
  background-color: transparent;
}

.thumbnail:hover img{
  border: 1px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
  width: 520px; /* enlarged image size */
}

.thumbnail:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: -610px; /*position where enlarged image should offset horizontally */
  z-index: 50;
}
